<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见布局</title>

    <style type="text/css">
        .page_center {
            width:100%;
        }
        #nav {
            background-color:red;
            height:20px;
        }
        #left {
            width:120px;
            background-color:green;
            position:absolute;
        }
        #middle {
            background-color:dodgerblue;
        }
        #right {
            width:120px;
            background-color:green;
            position:absolute;
            top:0;
            right:0;
        }
        #foot {
            background-color:pink;
        }
        #main {
            position:relative;
        }
    </style>

</head>
<body>
<div id="nav" class="page_center">上边</div>
<div id="main" class="page_center">
    <div id="left">左边</div>
    <div id="middle"> 中间部分</div>
    <div id="right">右边</div>
</div>
<div id="foot" class="page_center">底边</div>
</body>
</html>